<script setup>
import { ref, computed, onMounted } from 'vue';
import * as echarts from 'echarts';
import { CaretTop, CaretBottom } from '@element-plus/icons-vue';

const props = defineProps({
  data: Object
});

const timeRange = ref('week');
const chartRef = ref(null);
const currentWeight = ref(68.5);
const weightChange = ref(-0.8);
const currentBmi = ref(22.3);

const changeIcon = computed(() => weightChange.value >= 0 ? CaretTop : CaretBottom);
const changeStyle = computed(() => ({
  color: weightChange.value >= 0 ? '#f56c6c' : '#67c23a'
}));

const initChart = () => {
  const chart = echarts.init(chartRef.value);

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}<br/>体重: {c}kg'
    },
    xAxis: {
      type: 'category',
      data: ['6/1', '6/8', '6/15', '6/22', '6/29', '7/6', '7/13']
    },
    yAxis: {
      type: 'value',
      name: '体重(kg)',
      min: 65,
      max: 70
    },
    series: [{
      data: [69.3, 68.8, 68.5, 68.2, 68.0, 68.1, 68.5],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 3,
        color: '#409EFF'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
          { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
        ])
      }
    }]
  };

  chart.setOption(option);
  window.addEventListener('resize', chart.resize);
};

const fetchData = () => {
  console.log('获取体重数据，时间范围:', timeRange.value);
};

onMounted(() => {
  initChart();
  fetchData();
});
</script>

<template>
  <div class="weight-chart-container">
    <div class="header">
      <h3>体重趋势</h3>
      <el-select v-model="timeRange" size="small" @change="fetchData">
        <el-option label="最近7天" value="week" />
        <el-option label="最近30天" value="month" />
        <el-option label="最近1年" value="year" />
      </el-select>
    </div>
    <div ref="chartRef" class="chart" />
    <div class="stats">
      <el-statistic title="当前体重" :value="currentWeight" suffix="kg" />
      <el-statistic title="变化趋势" :value="weightChange" :precision="2">
        <template #suffix>
          <el-icon :style="changeStyle"><component :is="changeIcon" /></el-icon>
        </template>
      </el-statistic>
      <el-statistic title="BMI" :value="currentBmi" />
    </div>
  </div>
</template>

<style scoped>
.weight-chart-container {
  padding: 15px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart {
  width: 100%;
  height: 300px;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
}

:deep(.el-statistic__content) {
  font-size: 24px;
  font-weight: bold;
}
</style>